<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-row :gutter="24">
        <div class="jjwjsj-title">
          <span>待批复变更索赔明细表</span>
        </div>
        <a-col :offset="18" :md="6" :sm="8" style="display: flex; justify-content: flex-end; align-items: center">
          <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
            <a-button :disabled="editingKey !== ''" type="primary" icon="search" @click="searchQuery">查询</a-button>
            <a-button
              :disabled="editingKey !== ''"
              type="primary"
              icon="download"
              @click="testExportList"
              style="margin: 0px 8px"
            >
              导出
            </a-button>
            <a-upload
              name="file"
              :showUploadList="false"
              :multiple="false"
              :headers="tokenHeader"
              :action="importExcelUrl"
              :before-upload="beforeUpload"
              @change="handleImportExcel"
              accept=".docx, .doc, .xlsx, .xls, .pdf, .jpeg, .png"
            >
              <a-button :loading="upLoading" :disabled="editingKey !== ''|| upLoading" type="primary" icon="import">导入</a-button>
            </a-upload>
          </span>
        </a-col>
      </a-row>
    </div>

    <!-- 列表区域 -->
    <div>
      <div class="inforMation">
        <span class="redStar">
          <span>项目名称：</span>
          <a-input @click.native="openOrganModel" readOnly v-model="queryParam.xmmc" placeholder="请选择" style="width: 300px"/>
        </span>
        <span>金额单位：万元</span>
      </div>
      <a-table
        ref="table"
        size="middle"
        bordered
        class="edit-list"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        :scroll="{ y: 550 }"
      >
        <!--  表格中文字部分 -->

        <template v-for="col1 in ellipsisColList" :slot="col1" slot-scope="text, record">
          <div :key="col1">
            <a-input
              v-if="record.editable && ['xm'].indexOf(col1) == -1"
              :value="text"
              @change="(e) => handleChangeInput(e.target.value, record.id, col1)"
            ></a-input>
            <a-textarea
              v-else-if="record.editable && ['xm'].indexOf(col1) != -1"
              :value="text"
              @change="(e) => handleChangeInput(e.target.value, record.id, col1)"
            ></a-textarea>
            <j-ellipsis v-else-if="['xm'].indexOf(col1) != -1" :value="text" :length="8" />
            <span v-else>{{ text }}</span>
          </div>
        </template>

        <!-- 表格中数字部分 -->

        <template v-for="col3 in numColList" :slot="col3" slot-scope="text, record">
          <div :key="col3" v-if="record.totalName != '合计' && !record.serialnumber">
            <a-input-number
              style="width: 100%"
              :precision="2"
              v-if="record.editable"
              :value="text"
              @change="(value) => handleChange(value, record.id, col3, 'float')"
            ></a-input-number>
            <span
              v-else-if="
                (col3 == 'qrbl' || col3 == 'hsbl') &&
                ['一', '二', '三', '四', '五', '六', '七'].indexOf(record.xu) == -1
              "
              >{{ text }}%</span
            >
            <span v-else>{{ text }}</span>
          </div>
          <div :key="col3" v-else style="width: 100%; text-align: center">
            {{ text }}
          </div>
        </template>

        <template v-slot:action="text, record">
          <div v-if="record.totalName !== '合计' && !record.serialnumber" class="editable-row-operations">
            <span v-if="record.editable">
              <a @click="() => save(record.id)">保存</a>
              <a-divider type="vertical" />
              <a-popconfirm title="是否舍弃本次编辑内容？" @confirm="() => cancel(record.id)">
                <a>取消</a>
              </a-popconfirm>
            </span>
            <span v-else-if="['一', '二', '三', '四', '五', '六', '七'].indexOf(record.xu) == -1">
              <a :disabled="editingKey !== ''" @click="() => edit(record.id)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm
                :disabled="editingKey !== ''"
                title="是否确认删除？"
                @confirm="
                  () => {
                    Delete(record)
                  }
                "
              >
                <a>删除</a>
              </a-popconfirm>
            </span>
          </div>
        </template>
      </a-table>
    </div>
    <SelectDepat ref="departModal" :depurl="url.xmmc" @getdata="getData" keyName="xmmc"/>
  </a-card>
</template>

<script>
import { deleteAction, getAction, downFile, getFileAccessHttpUrl, httpAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { CommonMixin } from '@/views/sj/sjxxzhbb/jjwjsj/mixins/common.js'
import columns from './indexColumns'
import SelectDepat from '@/views/sj/sjxxzhbb/jjwjsj/mixins/SelectDepat'
export default {
  mixins: [JeecgListMixin, CommonMixin],
  components: { SelectDepat },
  data() {
    return {
      columns: columns(this),
      importExcelUrl: `${window._CONFIG['domianURL']}/sjxxzhbb/mxb1/importExcel`,
      url: {
        list: '/sjxxzhbb/mxb1/listNoPage',
        hjlist: '/sjxxzhbb/mxb1/queryTotalData',
        exportList: '/sjxxzhbb/mxb1/exportReport',
        isExistenceExcel: '/sjxxzhbb/mxb1/queryIsExist',
        xmmc: '/sjxxzhbb/mxb1/queryXmmc',
        delete: '/sjxxzhbb/mxb1/delete',
        saveRowData: '/sjxxzhbb/mxb1/edit',
      },
      queryParam: {
        deptId: undefined,
        xmmc: undefined,
      },
      model: {
        deptId: '',
        xmmc: undefined,
      },
      fetching: false,
      xmmcData: [],
      disableMonmomMixinCreated: false,
      isNeedSerial: false,
      editingKey: '',
      ellipsisColList: ['jldw', 'sjdw', 'jsdw'],
      numColList: ['sjfscb', 'wjjje', 'qrje', 'qrbl', 'hsje', 'hsbl', 'yearPic'],
    }
  },
  mounted() {
    // this.getProjectNames()
  },
  watch: {
    $route: {
      handler(to) {
        if (Object.keys(to.params).length > 0) {
          let { record } = to.params
          this.model = Object.assign({}, JSON.parse(record))
          this.queryParam.deptId = this.model.deptId
          this.queryParam.xmmc = this.model.gcmc
          this.searchQuery()
        }
      },
      immediate: true,
    },
  },
  methods: {
    getData(data) {
      // data.map(item=>{

      // })
      this.queryParam.deptId = data[0].deptId
      this.queryParam.xmmc = data[0].label
      this.searchQuery()
    },
    //  查询
    searchQuery() {
      if (this.queryParam.deptId) this.EnhanceLoad()
      else {
        this.$message.error('请选择项目名称')
      }
    },
    testExportList() {
      if (this.queryParam.deptId) this.OnTestExportList({ deptId: this.queryParam.deptId })
      else {
        this.$message.error('请选择项目名称')
      }
    },
    transformVnode(text) {
      return <span style="font-weight:700">{text}</span>
    },
    handleChangeSelectXmmc(value) {
      let item = this.xmmcData.find((item) => item.value.indexOf(value) != -1)
      this.queryParam.deptId = item.deptId
      this.queryParam.xmmc = item.value
    },
    save(id) {
      let NewData = [...this.dataSource]
      let targetRowData = NewData.find((item) => id === item.id)
      if (targetRowData) {
        this.editingKey = ''
        delete targetRowData.editable
        targetRowData['qrbl'] = Number(targetRowData['qrbl']) / 100
        targetRowData['hsbl'] = Number(targetRowData['hsbl']) / 100
        this.SaveEditRowData(targetRowData)
      } else {
        this.$message.error('程序有误')
      }
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@views/sj/sjxxzhbb/css/baobiaotable.less';
</style>